<script setup>
import { computed, reactive } from 'vue';
import {
  BASE_PERMISSION,
  ALL_PERMISSION,
} from '@/constants/enums/premissionEnums';
import { useFormModalContext } from '@/hooks/modal';
const { props, resolve, reject } = useFormModalContext();

console.log(props, 'props');

const actions = ref(props);
const checkAll = ref(false);
const indeterminate = ref(false);

watch(
  () => actions.value,
  (val) => {
    indeterminate.value = !!val.length && val.length < ALL_PERMISSION.length;
    checkAll.value = val.length === ALL_PERMISSION.length;
  },
  {
    immediate: true,
  },
);

const handleConfirm = () => {
  resolve(actions.value);
};

const handleCancel = () => {
  reject();
};
const handleCheckAll = (checked) => {
  if (checked) {
    actions.value = ALL_PERMISSION.map((item) => item.value);
  } else {
    actions.value = [];
  }
  indeterminate.value = false;
};
</script>

<template>
  <YFormModal title="权限设置">
    <div class="mt-8">
      <div class="mb-4">
        <a-checkbox
          v-model:checked="checkAll"
          :indeterminate="indeterminate"
          @change="handleCheckAll(checkAll)"
        >
          全选
        </a-checkbox>
      </div>
      <a-checkbox-group
        v-model:value="actions"
        :options="ALL_PERMISSION"
        name="checkboxgroup"
      ></a-checkbox-group>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleConfirm">确认</a-button>
      </a-space>
    </template>
  </YFormModal>
</template>
(checkAll)
